<script setup lang="ts">
import homeFooterCom from '../../components/homeFooterCom.vue'
//添加收藏
import { useRouter } from 'vue-router';
const router = useRouter()
function addCollection() {
    router.push('/home')
}
// const collectedList=localStorage.getItem('collectList')
// console.log('collectedList',collectedList);
// 获取本地存储的收藏列表，并解析为数组
// const collectedList = JSON.parse(localStorage.getItem('collectList') || '[]') // 默认值为空数组
import { ref } from 'vue';
const collectedList = ref(JSON.parse(localStorage.getItem('collectList') || '[]'));
console.log('collectedList', collectedList);
function delCollectClick(item:{id:number}){
    //取消收藏
    console.log(item.id);
    const delcourseId=item.id
     // 从收藏列表中移除该课程
     const index = collectedList.value.findIndex((course) => course.id === delcourseId);
    
    if (index !== -1) {
        // 删除该课程
        collectedList.value.splice(index, 1);

        // 更新 localStorage
        localStorage.setItem('collectList', JSON.stringify(collectedList.value));
    }
    
}
// 调试输出：查看当前收藏列表
console.log('collectedList', collectedList.value);
</script>

<template>
    <div>
        <div class="center">
            <van-cell title="我的收藏" style="text-align: center;font-size: 20px;" />
            
            <div v-if="collectedList.length>0" v-for="item in collectedList" :key="item.id" class="courselist">
                <div class="left">
                    <van-image width="100" height="100" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
                </div>
                <div class="right">
                    <!-- <p style="font-size: 0.16rem;margin-bottom: 0.1rem">111111111</p> -->
                    <p style="font-size: 0.16rem;margin-bottom: 0.1rem">{{ item.courseTitle }}</p>
                    <p>{{ item.courseteacher }}</p>
                    <p>
                        <van-image style="width: 12px;"
                            src="https://cdn7.axureshop.com/demo2023/2246171/images/11-%E8%AF%BE%E7%A8%8B%E5%88%97%E8%A1%A8-%E8%AE%BE%E8%AE%A1it/%E5%BD%A2%E7%8A%B6_u546.svg">

                        </van-image> <span style="display: inline-block;width: 160px;">5K学员 &#X3000; &#X3000;⭐4.8
                        </span>
                        <van-button @click="delCollectClick(item)" size="mini">取消收藏</van-button>
                    </p>
                </div>
                
            </div>
            <van-empty v-else description="No Data" />
            <van-button @click="addCollection" style="width: 80vw;margin: 10vw;box-shadow: 5px 2px 2px blue;" type="primary">添加收藏</van-button> 

        </div>
        <homeFooterCom></homeFooterCom>
    </div>
</template>
<style scoped lang="scss">
.center {
    header {
        height: 50px;
    }
    main {
        height: calc(100vh - 50px);
        overflow: auto;
    }
}

.courselist {
    box-sizing: border-box;
    padding: 2vw 2vw 2vw 4vw;
    display: flex;

    .left {
        width: 100px;
        margin-right: 2vw;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .right {
        flex: 1;

        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}
</style>